<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
<title>商品列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/float.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
	<!--header-->
	<jsp:include page="/header.jsp">
		<jsp:param name="flag" value="1"></jsp:param>
	</jsp:include>
	<!--banner-->

	<div class="banner">
		<div class="container">
			<div id="carousel-example-generic" class="carousel slide"
				data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators" id="olnum">
					<c:forEach items="${scroll}" var="g" varStatus="status">
						<c:choose>
							<c:when test="${status.first}">
								<li data-target="#carousel-example-generic" data-slide-to="0"
									class="active"></li>
							</c:when>
							<c:otherwise>
								<li data-target="#carousel-example-generic"
									data-slide-to="${status.index}"></li>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox" id="lunbotu"
					style="width: 1242px; height: 432px;">
					<c:forEach items="${scroll}" var="g" varStatus="status">
						<c:choose>
							<c:when test="${status.first}">
								<div class="item active">
									<h2 class="hdng">
										<a href="/goods_detail?id=${g.id}">${g.name}</a><span></span>
									</h2>
									<p>今日精选推荐</p>
									<a class="banner_a" href="javascript:;" onclick="buy(${g.id})">立刻购买</a>
									<div class="banner-text">
										<a href="/goods_detail?id=${g.id}"> <img src="${g.cover}" id="img" onmouseover="bigger()" onmouseout="smaller()"
											alt="${g.name}" width="350" height="350">
										</a>
									</div>
								</div>
							</c:when>
							<c:otherwise>
								<div class="item">
									<h2 class="hdng">
										<a href="/goods_detail?id=${g.id}">${g.name}</a><span></span>
									</h2>
									<p>今日精选推荐</p>
									<a class="banner_a" href="javascript:;" onclick="buy(${g.id})">立刻购买</a>
									<div class="banner-text">
										<a href="/goods_detail?id=${g.id}"> <img src="${g.cover}"
											alt="${g.name}" width="350" height="350">
										</a>
									</div>
								</div>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>

	<!--//banner-->

	<div class="subscribe2"></div>

	<!--gallery-->
	<div class="gallery">
		<div class="container">
			<div class="alert alert-danger">热销推荐</div>
			<div class="gallery-grids">
				<c:forEach items="${hotList}" var="g">
					<div class="col-md-4 gallery-grid glry-two">
						<a href="/goods_detail?id=${g.id}"> <img src="${g.cover}"
							class="img-responsive" alt="${g.name}" width="350" height="350" />
						</a>
						<div class="gallery-info galrr-info-two">
							<p>
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								<a href="/goods_detail?id=${g.id}">查看详情</a>
							</p>
							<a class="shop" href="javascript:;" onclick="buy(${g.id})">立刻购买</a>
							<div class="clearfix"></div>
						</div>
						<div class="galy-info">
							<p>${g.typeName}> ${g.name}</p>
							<div class="galry">
								<div class="prices">
									<h5 class="item_price">¥ ${g.price}</h5>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</c:forEach>

			</div>

			<div class="clearfix"></div>
			<div class="alert alert-info">新品推荐</div>
			<div class="gallery-grids">
				<c:forEach items="${newList}" var="g">
					<div class="col-md-3 gallery-grid ">
						<a href="/goods_detail?id=${g.id}"> <img src="${g.cover}"
							class="img-responsive" alt="${g.name}" />
						</a>
						<div class="gallery-info">
							<p>
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								<a href="/goods_detail?id=${g.id}">查看详情</a>
							</p>
							<a class="shop" href="javascript:;" onclick="buy(${g.id})">立刻购买</a>
							<div class="clearfix"></div>
						</div>
						<div class="galy-info">
							<p>${g.typeName}> ${g.name}</p>
							<div class="galry">
								<div class="prices">
									<h5 class="item_price">¥ ${g.price}</h5>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<!--//gallery-->

	<!--subscribe-->
	<div class="subscribe"></div>
	<!--//subscribe-->

	<!--footer-->
	<jsp:include page="/footer.jsp"></jsp:include>

	<!--float  -->
	<jsp:include page="/float.jsp"></jsp:include>

	<!-- gundong -->
	<div class="gun">
		<div class="text" id="gundong">今日热销推荐：谨小慎微（鼠）、踏实耕耘者（牛）、胜者为王（虎）
			新品推荐：浓情、巧克玫瑰！</div>
	</div>
	<script src="js/gundong.js"></script>
	<!-- //gundong -->
	<script type="text/javascript">
		var img = document.getElementById('img');

		function bigger() {
			img.style.width = '500px';
			img.style.height = '400px';
		}

		function smaller() {
			img.style.width = '300px';
			img.style.height = '280px';
		}
	</script>
</body>
</html>